<template>
    <ul>
        <li :class="{active:item.isCompleted}" v-for="(item,index) in data" :key="item.id">
            <input type="checkbox" :checked="item.isCompleted" @change="checkChange(item,$event)">
            <b>{{item.todo}}</b>
            <button @click="handleDel(index)">删除</button>
        </li>
    </ul>

    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{allCount}}</button>
        <button @click="filter('completed')">已完成:{{completedCount}}</button>
        <button @click="filter('active')">未完成:{{activeCount}}</button>
    </fieldset>
</template>
<script setup>
    import { defineProps,toRefs,defineEmits } from 'vue';
    //定义props接收data
    let props = defineProps(['data','allCount','completedCount','activeCount'])

    let {data,allCount,completedCount,activeCount} = toRefs(props)

    //点击删除按钮的逻辑
    let emits = defineEmits(['del','getFlag'])
    let handleDel = (index) =>{
        emits('del',index)
    }

    //勾选
    let checkChange = (item,e)=>{
        //拿到input元素的勾选状态
        console.log(e.target.checked)
        item.isCompleted=e.target.checked
    }

    //声明一个筛选todo的方法
    let filter = flag=>{
        emits("getFlag",flag)
    }
</script>
<style scoped>
    .active{
        background-color: deepskyblue;
    }
</style>